/* eslint-disable no-unused-vars */
import React, { useEffect, useMemo, useState } from 'react'
// import Mask from './components/Mask'
import GlobalContext from './components/GlobalContext'
import { useTranslation } from 'react-i18next'
import Title from './components/Title'
import Top from './components/Top'
import Bottom from './components/Bottom'

function App() {
  // const [maskShow, setMaskShow] = useState(false)
  const { t, i18n } = useTranslation()

  const changeLanguage = (language) => {
    i18n.changeLanguage(language)
  }

  return (
    <GlobalContext.Provider
      value={{
        // maskShow: maskShow,
        // setMaskShow: setMaskShow,
        changeLanguage: changeLanguage,
        t
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-start',
          alignItems: 'center',
          width: '100%'
        }}
      >
        <Title />
        <Top />
        <Bottom />
      </div>
      {/*<Mask maskShow={maskShow} />*/}
    </GlobalContext.Provider>
  )
}

export default App
